import React, { useState } from 'react'
import { Picker, Button } from 'antd-mobile'
import './style.scss'

const basicColumns = [
    [
        { label: '周一', value: 'Mon' },
        { label: '周二', value: 'Tues' },
        { label: '周三', value: 'Wed' },
        { label: '周四', value: 'Thur' },
        { label: '周五', value: 'Fri' },
    ],
    [
        { label: '上午', value: 'am' },
        { label: '下午', value: 'pm' },
        { label: '夜里', value: '夜里' },
        { label: '无明', value: '无明' },
    ],
]

// 基础用法
export default function V5() {
    const [visible, setVisible] = useState(false)
    const [value, setValue] = useState(['M'])
    return (
        <>
            <Button onClick={() => setVisible(true)} >
                弹出picker
            </Button>
            <Picker
                title='V5.3.1'
                columns={basicColumns}
                visible={visible}
                onClose={() => {
                    setVisible(false)
                }}
                value={value}
                onConfirm={v => {
                    setValue(v)
                }}
                style={{'--item-height': '2.75rem'}}
            />
        </>
    )
}
